<template>
  <div>
    <h2>商品货物信息表</h2>
    <ul>
      <li v-for="item in goods" :key="item.id">
        <img :src="item.url" alt="商品图片" />
        <input
          type="text"
          v-model="item.goodsName"
          placeholder="请输入商品名称"
        />
        <input
          type="text"
          v-model="item.goodsType"
          placeholder="请输入商品类别"
        />
        <input type="text" v-model="item.price" placeholder="请输入商品价格" />
        <input type="button" value="提交" @click="alterGood(item)" />
        <input type="button" value="删除" @click="deleteGood(item)" />
      </li>
      <!-- 添加商品 -->
      <li id="addGood" v-if="!addShow" @click="addShow = !addShow">+</li>
      <li v-if="addShow">
        <form
          action="http://localhost:8080/goods/addGood"
          method="post"
          enctype="multipart/form-data"
          target="stop"
          onsubmit="return check()"
        >
        选择商品图片(png格式)：<input id="file" type="file" name="uploadfile" multiple="multiple"/>
          <input type="text" placeholder="请输入商品名称" name="goodsName" v-model="addGood.goodsName"/>
          <input type="text" placeholder="请输入商品类别" name="typeName" v-model="addGood.typeName"/>
          <input type="text" placeholder="请输入商品价格" name="price" v-model="addGood.price"/>
          <input type="submit" value="提交" />
        </form>
        <iframe name="stop" frameborder="0" style="display:none"></iframe>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 商品信息
      goods: [],
      // 控制添加商品li是否显示
      addShow: false,
      // 用户添加商品信息
      addGood:{
        goodsName:'',
        typeName:'',
        price:''
      }
    };
  },
  methods: {
    // 获取后台的商品数据
    getGoodsData() {
      this.$axios({
        method: "get",
        url: "http://localhost:8080/goods/getShopGoods",
      }).then((res) => {
        res.data.data.goods.forEach((element, index) => {
          element.forEach((e) => {
            e.goodsType = res.data.data.typeNames[index];
            e.url = "http://localhost:8080/goods/getGoodsImg/" + e.id;
            this.goods.push(e);
          });
        });
      });
    },
    // 修改商品信息
    alterGood(item) {
      console.log(item);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/goods/alterGoodMsg/" + item.goodsType,
        data: {
          id: item.id,
          goodsName: item.goodsName,
          price: item.price,
          sell: item.sell,
          type_id: item.typeId,
        },
      }).then((res) => {
        if (!res.data) {
          alert("提交失败！");
        }
        this.$router.go(0);
      });
    },
    // 删除商品信息
    deleteGood(item) {
      if (confirm("确定删除该商品吗")) {
        this.$axios({
          method: "get",
          url: "http://localhost:8080/goods/deleteGood/" + item.id,
        }).then((res) => {
          if (res) {
            alert("删除成功");
            this.$router.go(0);
          }
        });
      }
    },
    // 检查上传商品信息是否完整
    check(){
        if(this.addGood.goodsName=='' || this.addGood.typeName=='' || this.addGood.price==''){
            alert("请完善商品信息")
            return false
        }
        if(document.getElementById('file').value.length || document.getElementById('file').value == '') {
            alert("请上传商品图片")
        }
    }
  },
  mounted() {
    this.getGoodsData();
  },
};
</script>

<style scoped>
h2 {
  text-align: center;
  color: dimgrey;
  margin: 20px 0;
}
ul {
  list-style: none;
  border: 1px solid dimgrey;
  margin-bottom: 50px;
}
li {
  display: flex;
  justify-content: center;
  padding: 10px;
  height: 80px;
  border-bottom: 1px solid dimgrey;
}
img {
  cursor: pointer;
  height: 80px;
  width: 80px;
}
input {
  margin-left: 40px;
  text-align: center;
  /* line-height: 60px; */
}
input[type="button"],input[type="submit"]{
  padding: 0 20px;
}
#addGood {
  font-size: xx-large;
  color: dimgray;
  font-weight: 700;
  text-align: center;
  line-height: 80px;
  cursor: pointer;
}
form input {
    line-height: 40px;
    margin-left: 20px;
    height: 60px;
}
form input[type="file"] {
    margin: 0;
    width: 70px;
}
</style>